<template>
  <div>
    <div class="loading" v-show="!isMainShow">
      <div class="open">正在为你开启幸福...<br />{{ this.num }}%</div>
      <div class="carpet"></div>
      <div class="run">
        <div class="boy" ref="boyMove" v-show="!isShow"></div>
        <div class="man" v-show="isShow"></div>
        <div class="girl" v-show="isShow"></div>
      </div>
    </div>
    <div class="enter" v-show="isMainShow">
      <div class="icon"></div>
      <div class="btn" @click="handleClick"></div>
    </div>
  </div>
</template>

<script>
const Preloader = require('preloader.js')
export default {
  name: 'Load',
  data () {
    return {
      num: 0,
      isShow: false,
      isMainShow: false,
      list: [
        require('../../public/img/bg1.jpg'),
        require('../../public/img/bg2.jpg'),
        require('../../public/img/bg3.jpg'),
        require('../../public/img/bg4.jpg'),
        require('../../public/img/bg5.jpg'),
        require('../../public/img/bg6.jpg'),
        require('../../public/img/bg7.jpg'),
        require('../../public/img/bg8.jpg'),
        require('../../public/img/bg9.jpg'),
        require('./../assets/img/trans-bg.jpg'),
        require('./../assets/img/img/bg-clothes1.png'),
        require('./../assets/img/img/bg-clothes2.png'),
        require('./../assets/img/img/bg-clothes3.png'),
        require('./../assets/img/img/bg-clothes4.png'),
        require('./../assets/img/img/bg-clothes5.png'),
        require('./../assets/img/img/bg-clothes6.png'),
        require('./../assets/img/img/b-clothes1.png'),
        require('./../assets/img/img/b-clothes2.png'),
        require('./../assets/img/img/b-clothes3.png'),
        require('./../assets/img/img/b-clothes4.png'),
        require('./../assets/img/img/b-clothes5.png'),
        require('./../assets/img/img/b-clothes6.png')
      ]
    }
  },
  mounted () {
    const that = this
    const preloader = new Preloader({
      resources: that.list,
      concurrency: 4
    })
    preloader.addProgressListener(function (loaded, length) {
      that.num = parseInt((loaded / length) * 100)
      that.$refs.boyMove.style.marginLeft =
        parseInt((loaded / length) * 100) + '%'
    })
    preloader.addCompletionListener(function () {
      that.isShow = true
      setTimeout(() => {
        that.isMainShow = true
      }, 1000)
    })
    preloader.start()
  },
  methods: {
    handleClick () {
      this.$router.push('index')
    }
  }
}
</script>

<style lang="less" scoped>
.loading {
  width: 100%;
  min-height: 100vh;
  padding-top: 1px;
  margin: auto;
  background: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3472156953,2586434258&fm=26&gp=0.jpg")
    no-repeat top/100%;
  .open {
    margin: 400px auto 0;
    text-align: center;
    font-size: 40px;
    font-weight: bolder;
    color: red;
  }
  .carpet {
    width: 680px;
    height: 60px;
    margin: 300px auto 0;
    box-sizing: border-box;
    background: url("./../assets/img/carpet.png") no-repeat bottom/100%;
  }
  .run {
    width: 430px;
    margin: -238px 0 0 34px;
    .boy {
      width: 136px;
      height: 212px;
      background-image: url("./../assets/img/run.png");
      background-position: 0, 0;
      background-size: auto 100%;
      animation: 0.5s run infinite;
    }
    .man {
      width: 144px;
      height: 170px;
      margin: 55px 0px 0px 430px;
      background: url("./../assets/img/knock-human.png") no-repeat center/100%;
    }
    .girl {
      width: 127px;
      height: 202px;
      margin: -200px 0px 0px 560px;
      background: url("./../assets/img/girl.png") no-repeat center/100%;
    }
  }
}
.enter {
  width: 100%;
  min-height: 100vh;
  padding-top: 1px;
  box-sizing: border-box;
  background: url("./../assets/img/main-bg.jpg") no-repeat top/100%;
  .icon {
    width: 673px;
    height: 552px;
    margin: 20px auto 20px;
    background: url("./../assets/img/main-title.png") no-repeat center/100%;
    animation: 1s iconTitle infinite;
  }
  .btn {
    width: 297px;
    height: 109px;
    position: absolute;
    left: 50%;
    top: 1050px;
    background: url("./../assets/img/main-btn.png") no-repeat center/100%;
    animation: 1s iconBtn infinite;
  }
}

@keyframes run {
  0% {
    background-position: 0 0;
  }
  19% {
    background-position: 0 0;
  }
  20% {
    background-position: -135px 0;
  }
  39% {
    background-position: -135px 0;
  }
  40% {
    background-position: -270px 0;
  }
  59% {
    background-position: -270px 0;
  }
  60% {
    background-position: -405px 0;
  }
  79% {
    background-position: -405px 0;
  }
  80% {
    background-position: -540px 0;
  }
  99% {
    background-position: -540px 0;
  }
  100% {
    background-position: 0px 0;
  }
}
@keyframes iconTitle {
  0% {
    margin-top: 50px;
  }
  50% {
    margin-top: 60px;
  }
  100% {
    margin-top: 50px;
  }
}
@keyframes iconBtn {
  0% {
    transform: translate(-50%) scale(1);
  }
  50% {
    transform: translate(-50%) scale(1.1);
  }
  100% {
    transform: translate(-50%) scale(1);
  }
}
</style>
